<template>
  <div id="bb">
    <router-link to="/login"
      ><el-button
        style="float: right; padding: 10px"
        el-button
        type="danger"
        plain
        >返回登录界面</el-button
      ></router-link
    >
    <el-form id="aaaaa" :rules="rules" ref="userInfo" :model="userInfo">
      <el-form-item
        label="用户名"
        :lable-width="formLabelWidth"
        prop="username"
      >
        <el-input
          type="input"
          placeholder="请输入用户名"
          v-model="userInfo.username"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话" :lable-width="formLabelWidth" prop="phone">
        <el-input
          type="input"
          placeholder="请输入你的电话"
          v-model="userInfo.phone"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" :lable-width="formLabelWidth" prop="password">
        <el-input
          type="input"
          placeholder="请输入密码"
          v-model="userInfo.password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" round @click="register">注册</el-button>
      </el-form-item>
    </el-form>
    <router-view></router-view>
  </div>
</template>

<script>
import { registerUser } from "../services/user";
export default {
  data() {
    return {
      userInfo: {
        username: "",
        password: "",
        phone: "",
      },
      formLabelWidth: "100px",
      rules: {
        username: [{ required: true, message: "昵称不能为空", tigger: "blur" }],
        password: [{ required: true, message: "密码不能为空", tigger: "blur" }],
        phone: [{ required: true, message: "电话不能为空", tigger: "blur" }],
      },
    };
  },
  methods: {
    register: function () {
      this.userInfo.roleid = 1;
      console.log(this.userInfo.roleid);
      console.log(this.userInfo);
      this.$confirm("确认要注册吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          registerUser(this.userInfo).then((res) => {
            this.$message({
              type: "success",
              message: "创建成功!",
            });
            this.$router.push({
              name: "login",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>


<style scoped>
#aaaaa {
  border-radius: 60px;
  background-clip: padding-box;
  margin: 160px auto;
  width: 600px;
  padding: 35px 35px 15px 35px;
  background-color: rgb(247, 247, 247);
  border: 2px solid #f38d74;
  box-shadow: 0 0 25px #ec6666;
  text-align: center;
  height: auto;
}
#bb {
  background: url("../assets/login_bg.png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
</style>
